<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
*{margin:0;padding:0}
ul li{list-style:none}
.dialog{position:fixed}
.dialog .chat_box{position:fixed;width:100%;height:100%;background:#00f}
.dialog .chat_info{position:absolute;overflow:auto;width:100%;height:80%;background:#F5F5F5}
.dialog .chat_send{position:absolute;bottom:0;width:100%;height:20%;background:#F5F5F5}
.dialog .chat_box .chat_info li{position:relative;clear:both;margin-top:15px;height:40px}
.dialog .chat_box .chat_info li .msg{float:left;display:inline-block;margin-left:20px;padding:10px;max-width:500px;border-radius:5px;background:#fff;font-size:14px}
.dialog .chat_box .chat_info li .msg:before{position:absolute;top:0;bottom:0;left:0;display:inline-block;margin:auto 0;width:0;height:0;border:10px solid transparent;border-right:10px solid #fff;content:""}
.dialog .chat_box .chat_info li.self .msg:before{top:0;right:0;bottom:0;left:auto;margin:auto 0;border:10px solid transparent;border-left:10px solid #98E165}
.dialog .chat_box .chat_info li.self .msg{float:right;display:inline-block;margin-right:20px;margin-left:0;background:#98E165;text-align:right}
.chat_send{border-top:1px solid #e7e7e7}
.chat_send textarea{overflow:auto;box-sizing:border-box;padding:10px;width:100%;height:75%;border:none;background:#F5F5F5;font-size:14px;resize:none}
.chat_send textarea:focus{outline:0}
.chat_send_btn{float:right;margin-right:15px;padding:3px 15px;border:1px solid #e7e7e7;border-radius:1px;background:#F5F5F5;color:#666;text-decoration:none;font-size:14px}
.chat_send_btn:hover{border-color:#129611;background:#129611;color:#fff}
::-webkit-scrollbar-track{background-color:#F5F5F5}
::-webkit-scrollbar{width:6px;background-color:#F5F5F5}
::-webkit-scrollbar-thumb{background-color:#999}
::-moz-scrollbar-track{background-color:#F5F5F5}
::-moz-scrollbar{width:6px;background-color:#F5F5F5}
::-moz-scrollbar-thumb{background-color:#999}
::-o-scrollbar-track{background-color:#F5F5F5}
::-o-scrollbar{width:6px;background-color:#F5F5F5}
::-o-scrollbar-thumb{background-color:#999}
::-ms-scrollbar-track{background-color:#F5F5F5}
::-ms-scrollbar{width:6px;background-color:#F5F5F5}
::-ms-scrollbar-thumb{background-color:#999}
.sys_msg{position:fixed;top:10%;z-index:200;display:none;width:100%;text-align:center}
.sys_msg .sys_content{position:absolute;top:10%;display:inline-block;padding:5px 50px;border-radius:3px;background:#F56C6C;color:#fff}
	</style>
	<body>
	  <div class="sys_msg js_sys_msg">
	    <div class="sys_content">网络异常</div>
	  </div>
	  <div class="dialog">
	    <!--<div class="users">
	      <ul>
	        <li>用户名</li>
	      </ul>
	    </div>-->
	    <div class="chat_box">
	      <div class="chat_info">
	        <ul class="js_chat_box">
	          <!--<li><span class="msg">你好吗？</span></li>
	          <li class="self"><span class="msg">不好</span></li>-->
	        </ul>
	      </div>
	      <div class="chat_send js_chatBox">
	        <textarea class="js_msgbox"></textarea>
	        <a class="chat_send_btn js_send" href="javascript:;">发送(Enter)</a>
	      </div>
	    </div>
	  </div>
	  <script src="http://localhost:8081/socket.io/socket.io.js" charset="utf-8"></script> 
	  <script src="./jquery.js"></script>  
	 <script>
     var chart={
       sock:null,
       connstatus:false,
       init(){
        this.msgboxF();  
        this.sendmsg();
        this.sock();
       },
       msgboxF(){
         $(".js_msgbox").on("focus",function(){
           $(".js_chatBox").css("background","#fff")
           $(".js_msgbox").css("background","#fff")
         })
         $(".js_msgbox").on("blur",function(){
            $(".js_chatBox").css("background","#F5F5F5")
            $(".js_msgbox").css("background","#F5F5F5")
         })
       },
       docCancal(){
        
       },
       sendmsg(){
         $(".js_send").click(()=>{
           this.send($(".js_msgbox").val())
         });
         $(".js_msgbox").on("keyup",function(e){
           if(e.keyCode==13){
             $(".js_send").trigger("click")
           }
         });
       },
       sock(){
        try{
           this.sock = io.connect("ws://localhost:8081");
           this.sock.on("connect",()=>{
             console.log(this.sock)
             this.connstatus = true;
             $(".js_sys_msg").hide()
           })
           
           this.sock.on("disconnect",()=>{
             this.connstatus = false;
             $(".js_sys_msg").show()
           })
           
           this.sock.on("msg",str=>{
             $(".js_chat_box").append(`<li><span class="msg">${str}</span></li>`);
             $(".chat_info").animate({"scrollTop":$(".js_chat_box").outerHeight()-$(".chat_info").outerHeight()+15},"fast")
           });
        }catch(e){
          $(".js_sys_msg").show()
        }
       },
       send(str){
         if(str.trim()){
           this.sock.emit("msg",str);
           if(this.connstatus){
             $(".js_chat_box").append(`<li class="self"><span class="msg">${str}</span></li>`);
             $(".chat_info").animate({"scrollTop":$(".js_chat_box").outerHeight()-$(".chat_info").outerHeight()+15},"fast")
             $(".js_msgbox").val("")
           }
         }
       }
     }
     chart.init();
	   
	 </script>
	</body>
</html>
